<script lang="ts" setup>
  import Button from '@sscd/button';
  import Tooltip from '@sscd/tooltip';
  const buttonWidth = 70;
</script>

<template>
  <div class="demo">
    <div class="demo-title">位置</div>
    <div class="demo-content">
      <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
        <Tooltip placement="topLeft">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>TL</Button>
        </Tooltip>
        <Tooltip placement="top">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>Top</Button>
        </Tooltip>
        <Tooltip placement="topRight">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>TR</Button>
        </Tooltip>
      </div>
      <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
        <Tooltip placement="leftTop">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>LT</Button>
        </Tooltip>
        <Tooltip placement="left">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>Left</Button>
        </Tooltip>
        <Tooltip placement="leftBottom">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>LB</Button>
        </Tooltip>
      </div>
      <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">
        <Tooltip placement="rightTop">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>RT</Button>
        </Tooltip>
        <Tooltip placement="right">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>Right</Button>
        </Tooltip>
        <Tooltip placement="rightBottom">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>RB</Button>
        </Tooltip>
      </div>
      <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
        <Tooltip placement="bottomLeft">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>BL</Button>
        </Tooltip>
        <Tooltip placement="bottom">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>Bottom</Button>
        </Tooltip>
        <Tooltip placement="bottomRight">
          <template #title>
            <span>prompt text</span>
          </template>
          <Button>BR</Button>
        </Tooltip>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .demo {
    .ant-btn {
      width: 70px;
      text-align: center;
      padding: 0;
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
</style>
